<template>
	<div class="app">
		<myNavbar title="电子水票"></myNavbar>
		<list v-if="waters.length>0" style="background-color: white;border-radius: 16px;">
			<cell v-for="item1 in waters" >
				<div class="coupon-couponList" >
					<div class="coupon-couponList-port1">
						<image :src="item1.thumbnail" style="height: 100px;width: 100px;"></image>
					</div>
					<div class="coupon-couponList-port2">
						<div>
							<text  class="coupon-couponList-port2-text1">{{item1.name}}</text>
						</div>
						<div >
							<text class="coupon-couponList-port2-text2">可用张数：{{item1.stock}}</text>
						</div>
						<!-- <div >
							<text class="coupon-couponList-port2-text2">价格：{{item1.price}}</text>
						</div> -->
						<div >
							<text class="coupon-couponList-port2-text3">有限期永久有效</text>
						</div>
					</div>
					<!-- <div class="coupon-couponList-port3" bindtap="useCoupon" data-id="{{item1.productId}}">去使用</div> -->
				</div>
			</cell>

		</list>
		<div class="gap"></div>
		<div class="shoppingCart-none" v-if="waters.length==0">
			<image class="shoppingCart-none-image " src="http://cdn.rzico.com/v4.0/footprint-none.png"></image>
			<div ><text class="shoppingCart-none-text">暂无水票 </text></div>
			<!-- <div  class="shoppingCart-none-button" @click="toIndex"><text style="font-size: 32px;color: #fff;">去逛逛</text></div> -->
		</div>
		<!-- <bottomFrame id="bottomFrame"></bottomFrame> -->
	</div>
</template>
<script>
	import {list} from '../../../../api/virtualStock.js'
	import myNavbar from "../../../../components/myNavbar/myNavbar.vue";
	export default {
		name: '',
		data() {
			return {
				id:'',
				waters:[]
			}
		},
		created() { // 在实例创建完成后被立即调用
			this.id=app.config.params
			this.loadTicket()
		},
		methods: {
			loadTicket(){
				list({
					memberId:this.id,
					subType: 2
				}).then(res=>{
					res.data.data.forEach(item=>{
					item.stock=parseInt(item.stock)
					item.price=parseFloat(item.price).toFixed(2);
					})

					this.waters=res.data.data


				})
			},

		},
		components: {
		myNavbar
		},
	}
</script>

<style scoped>
	.app {
		flex: 1;
		background-color: rgba(248, 248, 248, 1);
	}

	.swiper-item-box {
		margin-top: 20px;
		padding-left: 20px;
		padding-right: 20px;
	}

	.coupon-shopList {
		width: 710px;
		background-color: white;
		border-radius: 16px;
		padding-bottom: 20px;
	}

	.coupon-couponList-top {
		padding-top: 20px;
		display: flex;
		flex-direction: row;
		margin-left: 20px;
		width: 710px;
	}

	.coupon-couponList {
		margin-left: 25px;
		display: flex;
		flex-direction: row;
		width: 710px;
		align-items: center;
		padding: 30px;
		background-color: #FEF7EF;
		border-radius: 16px;
		color: #FF1010;
		margin-top: 30px;

	}

	.coupon-couponList-port1 {
		height: 100px;
		width: 100px;
	}

	.coupon-couponList-port2 {
		width: 380px;
		margin-left: 20px;
	}

	.coupon-couponList-port2-text2 {
		font-size: 24px;
		color: #F48583;
		margin-bottom: 5px;
	}

	.coupon-couponList-port2-text1 {
		font-size: 30px;
		font-weight: 700;
		/* color: #F48583; */
		margin-bottom: 10px;
		width: 380px;
		overflow: hidden;
		lines:1;
		text-overflow: ellipsis;
	}

	.coupon-couponList-port2-text3 {
		font-size: 24px;
		/* color: #F48583; */
	}

	.coupon-couponList-port3 {
		border-radius: 8px;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 2px solid #F48583;
		height: 40px;
		width: 80px;
		font-size: 20px;
	}

	.gap {
		height: 20px;
		width: 710px;
	}

	.shoppingCart-none {
		height: 500px;
		width: 750px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.shoppingCart-none-image {
		text-align: center;
		display: block;
		margin: 0 auto;
		width: 196px;
		height: 131px;
	}

	.shoppingCart-none-text {
		text-align: center;
		letter-spacing: 5px;
		font-size: 28px;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
		line-height: 42px;
		opacity: 0.3;
		margin-top: 30px;
	}

	.shoppingCart-none-button {
		/* display: block; */
		height: 82px;
		width:338px;
		margin-top: 30px;
		background-image: linear-gradient(to top, #FF560C , #FE8003);
		border-radius: 16px;
		letter-spacing: 5px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
